<template>
  <el-dialog
    ref="modal"
    :visible.sync="dialogVisible"
    :width="width"
    :before-close="handleClose"
    :fullscreen="fullscreen"
    :show-close="false"
    :close-on-click-modal="closeOnClickModal"
    v-el-drag-dialog="drag"
    :modal="modal"
    :destroy-on-close="destroyOnClose"
    :append-to-body="appendToBody"
  >
    <div slot="title">
      <span>{{ title }}</span>
      <span style="float: right">
        <i class="el-icon-full-screen" @click="fullScreenFun"></i>
        <i class="el-icon-close" @click="closeModal"></i>
      </span>
    </div>

    <slot></slot>

    <div slot="footer">
      <el-divider></el-divider>
      <el-button size="mini" @click="closeModal">取 消</el-button>
      <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "YxModal",
  props: {
    title: {
      type: String,
      default: "标题",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "50%",
    },
    // 是否可以通过点击 modal 关闭 Dialog
    closeOnClickModal: {
      type: Boolean,
      default: true,
    },
    // 是否需要遮罩层
    modal: {
      type: Boolean,
      default: true,
    },
    // 是否可拖拽
    drag: {
      type: Boolean,
      default: true,
    },
    // 关闭时销毁 Dialog 中的元素
    destroyOnClose: {
      type: Boolean,
      default: true,
    },
    // 关闭时销毁 Dialog 中的元素
    appendToBody: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      fullscreen: false,
    };
  },
  computed: {
    dialogVisible: {
      get() {
        console.log("dialogVisible:get",this.visible);
        return this.visible;
      },
      set(val) {
        // this.$emit("updateVisible", val);
        console.log("dialogVisible:set",val);
        this.$emit("update:visible", val);
      },
    },
  },
  created() {
    console.log("yxModal组件加载");
  },
  methods: {
    handleClose(done) {
      done();
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      //     done();
      //   })
      //   .catch((_) => {});
    },
    fullScreenFun() {
      this.fullscreen = !this.fullscreen;
    },
    confirm() {
      this.$emit("confirm");
      // this.dialogVisible = false
    },
    closeModal() {
      this.$emit("close");
    },
  },
};
</script>

<style scoped>
/deep/ .el-dialog__header {
  padding: 20px;
  line-height: 18px;
  border-bottom: 1px solid #e5e5e5;
}
.el-icon-full-screen {
  color: #1890ff;
  line-height: 21px;
  cursor: pointer;
  margin-right: 10px;
}
.el-icon-full-screen:hover {
  color: #100c0c9a;
}
.el-icon-close {
  font-size: 1.25rem;
  cursor: pointer;
}
.el-icon-close:hover {
  color: #1890ff;
}
/deep/.el-divider--horizontal {
  margin: 10px 0;
}
/deep/.el-dialog__footer {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 100%;
  padding: 10px 20px 10px 20px;
}
/deep/ .el-dialog__body {
  padding: 30px 20px 60px 20px;
}
/* .el-button {
  height: 20px;
  line-height: 20px;
} */
</style>